<template>
    <div>
        <el-button
            type="primary"
            style="margin-button: 10px"
            @click="addCategory"
        >
            新增分类
        </el-button>
        <!--  -->
        <el-dialog
            v-model="dialogVisible"
            :title="id ? '修改分类' : '新增分类'"
            :before-close="handleBeforeClose"
        >
            <CategoryEdit ref="categoryForm" :id="id" @success="editSuccess">
            </CategoryEdit>
        </el-dialog>

        <!-- 分类管理表格 -->
        <el-table
            :data="tableData"
            border
            style="margin-bottom: 20px"
            row-key="id"
        >
            <el-table-column prop="name" label="分类名称" />
            <el-table-column label="分类级别">
                <template #default="{ row }">
                    <span v-if="row.pid == 0">一级分类</span>
                    <span v-else>二级分类</span>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="分类编号" />
            <el-table-column label="分类图片">
                <template #default="{ row }">
                    <el-image
                        v-if="row.picture !== ''"
                        :src="row.picture"
                        style="display: flex; align-items: center; height: 60px"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" @click="editCategory(row.id)">
                        修改</el-button
                    >
                    <el-button type="danger" @click="deleCategoryItem(row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

